{% extends 'social_base.html' %}
{% load static %}
{% block title %}
{{ username }}的个人信息
{% endblock %}
{% block head %}
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
        background-image: url("{{ MEDIA_URL }}{{ user_profile.background_image }}");
        background-size: cover;
    }
</style>
{% endblock %}


{% block body %}

<div class="profile-container">

    <div class="profile-picture">
        {# <img src="{% main_static 'images/login-background.png' %}" alt="头像测试">#}
        <img src="{{ MEDIA_URL }}{{ user_profile.avatar }}" alt="头像">
    </div>

    <div class="user-info">
        <h2>{{ user_profile.nickname }}</h2>
        <p>id：{{ username }}</p>
        <p>个性签名：{{ user_profile.bio }}</p>
    </div>

    <div class="details-section">
        <h3>Contact Information</h3>
        <ul class="details-list">
            <li><strong>Email:</strong> john@example.com</li>
            <li><strong>Phone:</strong> (555) 123-4567</li>
            <!-- Add more details as needed -->
        </ul>
    </div>

    <div class="details-section">
        <h3>Address</h3>
        <ul class="details-list">
            <li><strong>Street:</strong> 123 Main St</li>
            <li><strong>City:</strong> Anytown</li>
            <li><strong>Country:</strong> Country</li>
            <!-- Add more details as needed -->
        </ul>

    </div>
</div>

<script>
    function openPopup() {
        // 获取弹出窗口元素
        var popup = document.getElementById("popup");

        // 显示弹出窗口
        popup.style.display = "block";
    }

    function closePopup() {
        // 获取弹出窗口元素
        var popup = document.getElementById("popup");

        // 隐藏弹出窗口
        popup.style.display = "none";
    }

    function confirmDelete() {
        // 使用 confirm 函数弹出确认对话框
        const result = confirm("是否删除？");


        if (result) {
            document.getElementById("deleteForm").submit();
        } else {
            // 用户点击了取消（否），在这里不执行任何提交表单的操作
        }
    }
</script>
{% endblock %}